<template>
  <div class="container">
    <div class="top">
      <div class="backImgBox"
           @click="goBack">
        <img src="../../assets/imgs/back.png"
             alt="backImg">
      </div>
      <div class="imgBox">
        <img class="img_txt"
             src="../../assets/imgs/top_txt.png"
             alt="img">
      </div>

      <div class="timeBox">
        <div class="date">{{date}}</div>
        <div class="week">{{week}}</div>
        <div class="hour">{{hour}}</div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="middleContent">
      <!-- 阳光食堂 -->
      <div class="canteenBox margin-right-20">
        <scroll :county=county></scroll>
      </div>
      <!-- 地图 -->
      <div class="mapBox">
        <div class="mapTop">
          <div class="list margin-right-20">
            <div class="listContent">
              <span>服务学校数量</span>
              <div class="iconBox">
                <img src="../../assets/imgs/up.png"
                     alt="img">
              </div>
            </div>
            <div class="numBox">
              <span>{{schoolNum}}</span>
              所
            </div>
          </div>
          <div class="list margin-right-20">
            <div class="listContent">
              <span>服务老师数量</span>
              <div class="iconBox">
                <img src="../../assets/imgs/down.png"
                     alt="img">
              </div>
            </div>
            <div class="numBox">
              <span>{{teacherNum}}</span>
              人
            </div>
          </div>
          <div class="list margin-right-20">
            <div class="listContent">
              <span>服务学生数量</span>
              <div class="iconBox">
                <img src="../../assets/imgs/up.png"
                     alt="img">
              </div>
            </div>
            <div class="numBox">
              <span>{{studentNum}}</span>
              人
            </div>
          </div>
          <div class="list">
            <div class="listContent">
              <span>服务食堂数量</span>
              <div class="iconBox">
                <img src="../../assets/imgs/up.png"
                     alt="img">
              </div>
            </div>
            <div class="numBox">
              <span>{{schoolNum}}</span>
              所
            </div>
          </div>
        </div>
        <div class="echartsBox">
          <div id="main"></div>
        </div>
      </div>
      <!-- 食品追溯 -->
      <div class="foodsBox margin-left-20">
        <rightscroll :countycher=county></rightscroll>
      </div>
    </div>
    <!--底部  -->
    <div class="companyBox">
      <bottomscroll></bottomscroll>
    </div>
  </div>
</template>

<script>
import JSON from './tz.json'
import scroll from '../../componentssun/scroll.vue'
import rightscroll from '../../componentssun/rightscroll.vue'
import bottomscroll from '../../componentssun/bottomscroll.vue'
export default {
  data() {
    return {
      county: '',
      option: {
        title: {
          show: false,
          text: '11',
          top: '3%',
          left: '5%',
          textStyle: {
            fontSize: 18,
            fontWeight: 300,
            color: '#b6d7ff',
          },
        },

        tooltip: {
          padding: 0,
          backgroundColor: 'rgba(0,0,0,0.6)',
          formatter: (params) => {
            // console.log(params)
            // params.data
            return `<div class="mapMark" style="  background: #000;border-radius:4px;opacity: 0.6;color: #fff;padding: 15px;width: 254px;box-sizing: border-box;">
      <div class="cityName" style="font-size: 20px;font-weight: 600;padding-bottom: 12px;border-bottom: 1px solid rgba(255,255,255,0.6);">${
        params.data.name
      }</div>
      <div class="schoolBox" style="margin-top: 15px;font-size: 16px;font-weight: 400;display: flex;">
        <span class="title">学校数量</span>
        <span class="num" style="display: inline-block;margin-left: auto;">${
          params.data.obj.school
        } 所</span>
      </div>
      <div class="schoolBox" style="margin-top: 15px;font-size: 16px;font-weight: 400;display: flex;">
        <span class="title">在校人数</span>
        <span class="num" style="display: inline-block;margin-left: auto;">${
          params.data.obj.student + params.data.obj.teacher
        } 人</span>
      </div>
      <div class="schoolBox" style="margin-top: 15px;font-size: 16px;font-weight: 400;display: flex;">
        <span class="title">阳光食堂</span>
        <span class="num" style="display: inline-block;margin-left: auto;">${
          params.data.obj.school
        } 所</span>
      </div>
      <div class="schoolBox" style="margin-top: 15px;font-size: 16px;font-weight: 400;display: flex;">
        <span class="title">配送企业</span>
        <span class="num" style="display: inline-block;margin-left: auto;">${
          params.data.obj.company
        } 所</span>
      </div>
    </div>`
          },
        },
        legend: {
          show: false,
          orient: 'vertical',
          top: '9%',
          left: '5%',
          icon: 'circle',
          data: [],
          selectedMode: 'single',
          selected: {},
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          inactiveColor: '#b6d7ff',
          textStyle: {
            color: '#ec808d',
            fontSize: 14,
            fontWeight: 300,
            padding: [0, 0, 0, 15],
          },
        },
        // visualMap: {
        //   min: 0,
        //   max: 500,
        //   show: false,
        //   splitNumber: 5,
        //   inRange: {
        //     color: 'rgba(12, 254, 217, 0.2)',
        //   },
        //   textStyle: {
        //     color: 'red',
        //   },
        // },
        geo: {
          map: '台州',
          label: {
            show: true,
            color: '#fff',
            emphasis: {
              show: true,
              color: '#fff',
            },
          },
          //   emphasis: {
          //     label: {
          //       show: false,
          //     },
          //   },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: 'rgba(12, 254, 217, 0.2)',
              borderColor: '#0CFED9',
              borderWidth: 1,
            },
            emphasis: {
              areaColor: '#FFBA00', // hover效果
            },
          },
          select: {
            itemStyle: {
              areaColor: '#FFBA00',
              //   color:'red'
            },
            label: {
              show: true,
              color: '#fff',
            },
          },
          //silent:true,
          selectedMode: 'single',
          left: '5%',
          right: '5%',
          top: '5%',
          bottom: '5%',
        },
        series: [
          //   {
          //     name: '年度总项目数据查询',
          //     type: 'map',
          //     geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
          //     data: [],
          //   },
        ],
      },
      echartObj: null,
      dataList: {
        school: {},
        teacher: {},
        student: {},
      },
      schoolNum: 0,
      studentNum: 0,
      teacherNum: 0,
      hour: '',
      date: '',
      week: '',
      cityName: '',
      selected: false,
    }
  },
  components: {
    scroll: scroll,
    rightscroll: rightscroll,
    bottomscroll: bottomscroll,
  },
  async created() {
    this.getTime()
    await this.getData()
  },
  mounted() {},
  methods: {
    // 返回
    goBack() {
      location.href = 'http://47.99.241.207:57100/#/'
    },
    //获取时间
    getTime() {
      setInterval(() => {
        var myDate = new Date()
        let year = myDate.getFullYear() //获取完整的年份(4位,1970-????)
        let month = myDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
        if (month < 10) {
          month = '' + '0' + month
        }
        let day = myDate.getDate() //获取当前日(1-31)
        if (day < 10) {
          day = '0' + day
        }
        let week = myDate.getDay() //获取当前星期X(0-6,0代表星期天)
        switch (week) {
          case 0:
            this.week = '星期日'
            break
          case 1:
            this.week = '星期一'
            break
          case 2:
            this.week = '星期二'
            break
          case 3:
            this.week = '星期三'
            break
          case 4:
            this.week = '星期四'
            break
          case 5:
            this.week = '星期五'
            break
          default:
            this.week = '星期六'
            break
        }
        let hour = myDate.getHours() //获取当前小时数(0-23)
        if (hour < 10) {
          hour = '0' + hour
        }
        let min = myDate.getMinutes() //获取当前分钟数(0-59)
        if (min < 10) {
          min = '0' + min
        }
        let second = myDate.getSeconds() //获取当前分钟数(0-59)
        if (second < 10) {
          second = '0' + second
        }
        this.date = year + '-' + month + '-' + day
        this.hour = hour + ':' + min + ':' + second
      }, 1000)
    },
    // 初始化地图
    initMap() {
      if(this.echartObj){
           this.echartObj.clear()
      }
      // 初始化地图
      this.echartObj = this.$echarts.init(document.getElementById('main'))
      this.$echarts.registerMap('台州', JSON)
      this.echartObj.setOption(this.getOptions(), true)
      window.addEventListener('resize', () => {
        if (this.echartObj && this.echartObj.resize) {
          this.echartObj.resize()
        }
      })
    },
    async getData() {
      const res = await this.$api.GetMapData()
      //   console.log('res---', res)
      this.dataList = res
      this.schoolNum = res.school.count
      this.teacherNum = res.teacher.count
      this.studentNum = res.student.count
      this.initMap()
      this.echartObj.on('click', (param) => {
        //   console.log('click---',param)
        // console.log('param', param)
        //  console.log('cityName', this.cityName,param.data.name,this.selected)
        // 重新赋值学校，老师，学生人数
        if (this.cityName == param.data.name && !this.selected) {
          this.schoolNum = this.dataList.school.count
          this.teacherNum = this.dataList.teacher.count
          this.studentNum = this.dataList.student.count
          this.changeCounty()
          this.initMap()
        } else {
          this.schoolNum = param.data.obj.school
          this.teacherNum = param.data.obj.teacher
          this.studentNum = param.data.obj.student
          this.cityName = param.data.name
          this.changeCounty(param.data.name)
        }
        this.selected = !this.selected
        console.log(this.selected)
      })
    },
    changeCounty(name) {
      this.county = name
      // 区县 this.county = '玉环市'，全部市this.county = ''等于空
    },
    getOptions() {
      this.setOptions(
        'series',
        (() => {
          const arr = []
          //   Object.values(this.radioList).map((item, index) => {
          // console.log('item---', item)
          arr.push({
            name: '',
            type: 'map',
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: this.getSeriesData(),
          })
          //   })
          return arr
        })()
      )
      return this.option
    },
    getSeriesData(item) {
      return JSON.features.map((item) => {
        // console.log('item22---', item)
        // console.log(111, this.dataList.teacher.yearCountByCountryMap)
        // 老师人数
        let obj = {}
        this.dataList.teacher.yearCountByCountryMap['2020'].forEach(
          (items, index) => {
            if (items.label == item.properties.name) {
              // 学生人数
              let student = this.dataList.student.yearCountByCountryMap[
                '2020'
              ].filter((a) => {
                return a.label == item.properties.name
              })
              // 阳光食堂
              let school = this.dataList.school.yearCountByCountryMap[
                '2020'
              ].filter((a) => {
                return a.label == item.properties.name
              })
              // 配送企业
              let company = this.dataList.company.countryMap.filter((a) => {
                return a.country == item.properties.name
              })
              //   console.log('company---', company)
              //   console.log(items.label)
              obj.name = item.properties.name
              obj.obj = {
                teacher: items.total,
                student: student[0].total,
                school: school[0].total,
                company: company[0].total,
              }
              //   return {
              //     name: item.properties.name,
              //     obj: {
              //       teacher: items.total,
              //       student: student[0].total,
              //       school: school[0].total,
              //       company: company[0].total,
              //     },
              //   }
            }
          }
        )
        // console.log('obj---', obj)
        return obj
        // if (item.properties.name == '温岭市') {
        //   this.dataList.teacher.yearCountByCountryMap['2020'].forEach(
        //     (items) => {
        //       if (items.label == '温岭市') {
        //       }
        //     }
        //   )
        //   return {
        //     name: item.properties.name,
        //     value: Math.ceil(Math.random() * 500),
        //     obj: {
        //       schoolNum: 123,
        //     },
        //   }
        // } else {
        //   return {
        //     name: item.properties.name,
        //     value: Math.ceil(Math.random() * 500),
        //     obj: {
        //       a: Math.ceil(Math.random() * 500),
        //       b: Math.ceil(Math.random() * 500),
        //       c: Math.ceil(Math.random() * 500),
        //       d: Math.ceil(Math.random() * 500),
        //       num: 111,
        //     },
        //   }
        // }
      })
      return this.radioList[this.radioActive] === item
        ? JSON.features.map((item) => {
            console.log('item22---', item)
            return {
              name: item.properties.name,
              value: Math.ceil(Math.random() * 500),
              obj: {
                a: Math.ceil(Math.random() * 500),
                b: Math.ceil(Math.random() * 500),
                c: Math.ceil(Math.random() * 500),
                d: Math.ceil(Math.random() * 500),
              },
            }
          })
        : []
    },
    setOptions(objKey, objVal) {
      if (
        this.option[objKey] &&
        typeof this.option[objKey] === 'object' &&
        !Array.isArray(this.option[objKey])
      ) {
        this.option[objKey] = Object.assign(this.option[objKey], objVal)
      } else {
        this.option[objKey] = objVal
      }
      this.$set(this.option, objKey, this.option[objKey])
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: url(../../assets/imgs/bg.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  padding: 0 20px;
  box-sizing: border-box;
}
.top {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../../assets/imgs/top.png) no-repeat;
  background-size: 100% 100%;
  height: 80px;
  position: relative;
  //   width: 100%;
  .imgBox {
    //   width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    img {
      //   width: 100px;
      width: 100%;
    }
    .img_txt {
      //   width: 100%;
      //   position: absolute;
      //   left:calc(50% - 128px);
      //   top:0px;
    }
  }
  .backImgBox {
    z-index: 999;
    width: 30px;
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    img {
      width: 100%;
    }
  }
  .timeBox {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 80px;
    display: flex;
    align-items: center;
    color: #fff;
    width: 100%;
    font-size: 18px;
    .date {
      margin-left: auto;
      margin-right: 1%;
    }
    .week {
      margin-right: 2%;
    }
    .hour {
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.middleContent {
  display: flex;
}
.mapBox {
  width: 50%;
  display: flex;
  flex-direction: column;
  height: calc(70vh - 64px);
  //background: rgb(102, 102, 136);
  .mapTop {
    padding: 30px 15px 0;
    display: flex;

    .list {
      width: calc(25% - 15px);
      display: flex;
      //   align-items: center;
      //   justify-content: center;
      flex-direction: column;
      color: #fff;
      .listContent {
        display: flex;
        // font-size: 16px;
        span {
          font-size: 20px;
        }
        .iconBox {
          display: flex;
          flex: 0 0 20px;
          align-items: center;
          overflow: hidden;
          margin-left: 5px;
          img {
            width: 100%;
          }
        }
      }
      .numBox {
        width: calc(100% - 20px);
        margin-top: 8px;
        font-size: 18px;
        padding: 2px 5px;
        box-sizing: border-box;
        display: flex;
        align-items: baseline;
        background-image: linear-gradient(
          to right,
          rgba(12, 254, 217, 1),
          rgba(12, 254, 217, 0.2)
        );
        span {
          font-size: 40px;
          font-weight: bold;
          display: inline-block;
          margin-right: 8px;
        }
      }
    }
  }
  .echartsBox {
    flex: 1;
    width: 100%;
    height: 100%;
    #main {
      width: 100%;
      height: 100%;
    }
  }
}
// .imgBox{
//   height: 79px;
// }
// .imgBox img{
//   height: 100%;
// }
.foodsBox,
.canteenBox {
  width: 25%;
  /*height: calc(70vh - 64px);*/
  /*background: red;*/
}
.companyBox {
  /*margin-top: 20px;*/
  width: 100%;
  height: 280px;
  /*height: calc(30vh - 20px);*/
  /*background: pink;*/
  box-sizing: border-box;
}
.mapMark {
  background: #000;
  opacity: 0.6;
  color: #fff;
  padding: 15px;
  width: 254px;
  box-sizing: border-box;
  .cityName {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba($color: #fff, $alpha: 0.6);
  }
  .schoolBox {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    .title {
    }
    .num {
      display: inline-block;
      margin-left: auto;
    }
  }
}
.margin-left-20 {
  margin-left: 20px;
}
.margin-right-20 {
  margin-right: 20px;
}
.margin-right-20 {
  margin-right: 20px;
}
</style>